<template>
  <div class="member-list">
    <el-button type="primary" class="add-button" icon="el-icon-plus" @click="$router.push('/members/add')" circle></el-button>

    <el-dialog title="编辑成员信息" top="25px" lock-scroll width="640px" @close="$router.push('/members')" :visible.sync="openMemberEditer">
      <!-- 使用url来传递参数 /members/edit/${studentId} -->
      <MemberEditer @submit="updateTableData" />
    </el-dialog>
    <el-dialog title="编辑成员信息" top="25px" lock-scroll width="640px" @close="$router.push('/members')" :visible.sync="openApplyScore">
      <!-- 使用url来传递参数 /members/apply-score/${studentId} -->
      <ApplyScore @submit="openApplyScore = false" />
    </el-dialog>
    <el-form :inline="true" size="mini" :model="filterOption" class="member-list-filter">
      <el-form-item>
        <el-input v-model="filterOption.studentId">
          <template slot="prepend">学号</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filterOption.name">
          <template slot="prepend">姓名</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filterOption.grade">
          <template slot="prepend">年级</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filterOption.className">
          <template slot="prepend">班级</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="exportDataToExcel">导出当前表成Excel文件</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="data" :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="性别">
              <span>{{ props.row.gender === 1 ? "男" : "女" }}</span>
            </el-form-item>
            <el-form-item label="籍贯">
              <span>{{ props.row.nativePlace }}</span>
            </el-form-item>
            <el-form-item label="个人网站">
              <el-tooltip class="item" effect="dark" :content="props.row.blogUrl" placement="top-start">
                <span>{{ props.row.blogUrl }}</span>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="学习方向">
              <span>{{ props.row.major }}</span>
            </el-form-item>

            <el-form-item label="电话">
              <span>{{ props.row.phoneNumber }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="QQ">
              <span>{{ props.row.qq }}</span>
            </el-form-item>
            <el-form-item label="WeChat">
              <span>{{ props.row.wechat }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="studentId" label="学号" sortable width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="grade" label="年级" sortable width="150">
      </el-table-column>
      <el-table-column prop="className" label="班级" width="150">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEditButtonClick(scope.row.studentId)">修改</el-button>
          <el-button size="mini" type="success" @click="$emit()">补签</el-button>
          <el-button size="mini" type="warning" @click="handleScoreButtonClick(scope.row.studentId)">积分</el-button>
          <el-button type="danger" style="float: right; margin-right: 8px;" icon="el-icon-delete" @click="handleDeleteButtonClick(scope.row.studentId)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[12, 24, 36, 999]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import api from "@/api";
import MemberEditer from "@/components/MemberEditer";
import ApplyScore from "@/views/members/ApplyScore";
import exportDataToExcelMixin from "@/mixins/exportDataToExcel";
import paginationHandler from "@/mixins/paginationHandler";
import debounce from "@/utils/debounce";
export default {
  components: {
    MemberEditer,
    ApplyScore
  },
  mixins: [
    exportDataToExcelMixin,
    paginationHandler
  ],
  data() {
    return {
      name: "member list",
      loading: false,
      current: 1,
      size: 12,
      pages: 0,
      total: 0,
      data: [],
      filterOption: {
        studentId: null,
        grade: null,
        name: null,
        className: null
      },
      openMemberEditer: false,
      openApplyScore: false,
    };
  },
  watch: {
    filterOption: {
      deep: true,
      handler() {
        debounce(this.updateTableData, 1000)();
      }
    }
  },
  created() {
    this.updateTableData();
  },
  methods: {
    handleEditButtonClick(studentId) {
      this.$router.push(`/members/edit/${studentId}`);
      this.openMemberEditer = true;
    },
    handleScoreButtonClick(studentId) {
      this.$router.push(`/members/apply-score/${studentId}`);
      this.openApplyScore = true;
    },
    async handleDeleteButtonClick(studentId) {
      try {
        await this.$confirm(`此操作将学号为 ${studentId} 的成员永久除名, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await api.deleteMember({
          studentId
        });
        this.$message.success("删除成功");
      } catch (error) {
        this.$message.info("已取消操作");
      }
    },
    async updateTableData() {
      this.loading = true;
      const { data } = await api.getMembers({
        size: this.size,
        current: this.current,
        ...this.filterOption
      });
      this.loading = false;
      this.data = data.data.records;
      this.pages = data.data.pages;
      this.total = data.data.total;
    },
  }
};
</script>

<style lang="scss" >
.add-button {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  z-index: 100;
  transform: scale(2);
}

.member-list-filter {
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #fff;
  & > div.el-form-item {
    margin: 0;
    width: 200px;
    padding-left: 5px;
  }
}

.member-list {
  width: 98%;
  min-width: 1000px;
  margin: 0 auto;
}
.table-expand {
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  .el-form-item {
    box-sizing: border-box;
    padding: 0 8px;
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  label {
    width: 90px;
    color: #99a9bf;
  }
}
</style>
